<div id="content_header">
  <h3>Create a new bank transfer record</h3>
</div>
<div class="row">
  <div class="col-md-6 col-lg-4">
    <form name="form" role="form" ng-submit="add()">

      <div class="form-group" ng-class="{ 'has-error': errors.Bank}">
        <label class="required" for="BankId">Bank</label>
        <select name="" class="form-control" id="BankId" ng-model="newItem.Bank" ng-options="bank as bank.Name for bank in banks" required>
          <option value="" ng-hide="newItem.BankId">Select a bank.</option>
        </select>
        <error-widget field="errors.Bank"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.RefNumber}">
        <label for="RefNumber">Refference Number</label>
        <input type="text" name="RefNumber" class="form-control" id="RefNumber" placeholder="Input field" ng-model="newItem.RefNumber">
        <error-widget field="errors.RefNumber"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Amount}">
        <label class="required" for="Amount">Amount</label>
        <span class="error" ng-show="form.Amount.$error.required">Required!</span>
        <input type="number" name="Amount" class="form-control" id="Amount" placeholder="Input field" ng-model="newItem.Amount" min="0" required>
        <error-widget field="errors.Amount"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Sender}">
        <label class="required" for="Sender">Sender</label>
        <span class="error" ng-show="form.Sender.$error.required">Required!</span>
        <input type="text" name="Sender" class="form-control" id="Sender" placeholder="Input field" ng-model="newItem.Sender" required>
        <error-widget field="errors.Sender"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Date}" ng-click="openDatepicker($event, 0)">
        <label class="required" for="">Date</label>
        <div class="input-group">
          <input type="hidden" class="form-control" datepicker-popup="{{format}}" ng-model="timepicker.timeA" is-open="datePicker.isOpen[0]" datepicker-options="dateOptions" ng-required="true" close-text="Close" ng-disabled="true" />
          <span class="form-control">{{ timepicker.timeA | date: 'dd MMMM yyyy' }}</span>
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
        </div>
        <error-widget field="errors.Date"></error-widget>
      </div>

      <div class="form-group" ng-class="{ 'has-error': errors.Note}">
        <label for="Note">Note</label>
        <textarea name="Note" id="Note" cols="30" rows="10" class="form-control" ng-model="newItem.Note"></textarea>
        <error-widget field="errors.Note"></error-widget>
      </div>

      <button type="submit" class="btn btn-primary" >Submit</button>
    </form>
  </div>
</div>